<template>
  <div class="box">
      <div class="head">
        <search :backNum="backNum" />
        <van-dropdown-menu>
          <van-dropdown-item v-model="value" :options="option" @change="change"/>
          <van-dropdown-item title="价格筛选" ref="item">
            <div>
              <input class="priceRange lef" type="text" v-model="priceDown"> -
              <input class="priceRange" type="text" v-model="priceUp">
              <button class="select" @click="select">查找</button>
            </div>
            <div class="resetDiv">
              <button class="select reset" @click="reset">恢复默认</button>
            </div>
          </van-dropdown-item>
        </van-dropdown-menu>
      </div>
      <div class="content">
        <proList :cos="cos" :pro="pro" :isLoading="true" />
      </div>
  </div>
</template>

<script>
/* eslint-disable */
import Vue from 'vue'
import { Search, icon, Col, Row, DropdownMenu, DropdownItem } from 'vant'
import { categorybrandprolist, hotSearch } from '@/api/list'
import proList from '@/components/proList'
import search from '@/components/search'

Vue.use(Col)
Vue.use(Row)
Vue.use(icon)
Vue.use(Search)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
export default {
  data () {
    return {
      pro: [],
      arr: [],
      listData: [],
      searchValue: '',
      cos: 'cos_1',
      value: 0,
      option: [
        { text: '默认排序', value: 0 },
        { text: '价格升序', value: 1 },
        { text: '价格降序', value: 2 }
      ],
      priceDown: '',
      priceUp: '',
      filterList: [],
      isFind: false,
      backNum: -1
    }
  },
  computed: {
    category () {
      return this.$router.history.current.query.category
    },
    brand () {
      return this.$router.history.current.query.brand
    },
    keyword () {
      return this.$router.history.current.query.keyword
    },
    bool () {
      return this.$router.history.current.query.bool
    },
    cate () {
      return this.$router.history.current.query.category
    }
  },
  components: {
    proList,
    search
  },
  async mounted () {
    this.pro = await categorybrandprolist({ category: this.category, brand: this.brand })
    if (this.bool) {
      this.pro = await categorybrandprolist({ category: this.category, brand: this.brand })
    }
    if (!this.pro) {
      this.pro = await hotSearch({ keyword: this.keyword })
    }
    this.arr = this.pro.concat()
    // window.addEventListener('hashchange', () => {
    //   console.log(111111111)
    // })
  },
  watch: {
    async $route () {
      // this.backNum --
      // console.log(this.backNum)
      await this.reGetData()
      return 1
    }
  },
  methods: {
    back () {
      this.$router.back()
    },
    onConfirm () {
      this.$refs.item.toggle()
    },
    select () {
      this.pro = this.arr.concat()
      this.filterList = this.pro.filter((item, index) => {
        return item.originprice > this.priceDown && item.originprice < this.priceUp
      })
      this.pro = this.filterList
      this.findList = this.pro.concat()
      this.isFind = true
    },
    reset () {
      this.pro = this.arr.concat()
      this.isFind = false
    },
    onSearch () {},
    async reGetData () {
      // 重新拉取数据
      this.pro = await categorybrandprolist({ category: this.$router.history.current.query.category, brand: this.$router.history.current.query.brand })
      if (this.bool) {
        this.pro = await categorybrandprolist({ category: this.$router.history.current.query.category, brand: this.$router.history.current.query.brand })
      }
      if (!this.pro) {
        this.pro = await hotSearch({ keyword: this.$router.history.current.query.keyword })
      }
      this.arr = this.pro.concat()
      console.log(this.pro)
    },
    change (value) { // 价格升序降序
      switch (value) {
        case 0:
          // 这里将默认 和 筛选之后默认做了区分 依赖数据是isFind
          if (this.isFind) this.pro = this.findList.concat()
          else this.pro = this.arr.concat()
          break
        case 1:
          this.pro.sort((a, b) => {
            return a.originprice - b.originprice
          })
          break
        case 2:
          this.pro.sort((a, b) => {
            return b.originprice - a.originprice
          })
          break
      }
    }
  }
}
</script>

<style lang='stylus' scoped>
.van-row .van-col
  text-align center
  height 54px
  line-height 54px
.priceRange
  border-radius .3rem
  overflow hidden
  border none
  width 32%
  height 1.2rem
  background-color #eee
  margin 1rem auto
.select
  width 15%
  border none
  height 1.2rem
  border-radius .3rem
  margin-left .5rem
  font-size 12px
.resetDiv
  display flex
  justify-content center
  align-items center
.reset
  margin-bottom .5rem
.lef
  margin-left 1.7rem
.content
  background-color #eee
</style>
